<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="">
        <span><h1>Neo4j Login</h1></span>
      </el-form-item>
      <el-form-item label="Protocol">
        <el-radio v-model="form.Protocol" label="bolt">Bolt</el-radio>
        <el-radio v-model="form.Protocol" label="neo4j">Neo4j</el-radio>
      </el-form-item>
      <el-form-item label="IP Address">
        <el-input v-model="form.host" placeholder="localhost"></el-input>
      </el-form-item>
      <el-form-item label="Server Port">
        <el-input v-model="form.port" placeholder="7689"></el-input>
      </el-form-item>
      <el-form-item label="User Name">
        <el-input
          v-model="form.username"
          placeholder="please input your username"
        ></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input
          v-model="form.password"
          placeholder="your password" show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="connect(form)">Connect</el-button>
        <el-button @click="onCancle">Cancel</el-button>
      </el-form-item>
      <el-form-item label="Cypher QL">
        <el-input type="textarea" :rows="2" placeholder="Cypher QL" v-model="cql"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query(cql, res)">Query</el-button>
      </el-form-item>
      <el-form-item label="Out Put">
        <span>{{ res }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>i
import { connect, query } from "@/utils/neo"

export default {
  data() {
    return {
      form: {
        protocol: "neo4j",
        host: "etdev.kappakoala.com",
        port: "7689",
        username: "neo4j",
        password: "1qaz2wsx@et"
      },
      cql: "Match (n:project) Return n",
      res: []
    };
  },
  methods: {
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

